<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { NDropdown, NButton, NIcon } from 'naive-ui'
import { DotsVertical } from '@vicons/tabler'

// 定义接收的属性
interface Agent {
  id: number
  avatarUrl: string
  name: string
  description: string
  tags: string[]
  lastChatTime: string
}

interface Props {
  agent: Agent
  isSelected: boolean
}

const props = defineProps<Props>()

// 定义事件
const emit = defineEmits(['pin', 'delete', 'open-studio'])

// 下拉选项
const dropdownOptions = [
  {
    label: '置顶',
    key: 'pin'
  },
  {
    label: '创建副本',
    key: 'copy'
  },
  {
    label: '移动到分组',
    key: 'move'
  },
  {
    label: '删除',
    key: 'delete',
    style: 'color: red;'
  }
]

// 处理下拉选择
const handleSelect = (key: string) => {
  console.log('Selected:', key)
  // 根据选项触发相应的事件
  if (key === 'pin') {
    emit('pin', props.agent.id)
  } else if (key === 'delete') {
    emit('delete', props.agent.id)
  } else if (key === 'copy') {
    emit('open-studio', props.agent.id)
  }
}
</script>

<template>
  <div class="ai-agent-item" :class="{ selected: isSelected }">
    <!-- 左侧：头像 -->
    <n-avatar class="avatar" round :src="agent.avatarUrl" :alt="agent.name" />

    <!-- 中间：内容 -->
    <div class="content">
      <h3 class="name">{{ agent.name }}</h3>
      <p class="description">{{ agent.description }}</p>
      <div class="tags">
        <span v-for="(tag, index) in agent.tags" :key="index" class="tag">
          {{ tag }}
        </span>
      </div>
    </div>

    <!-- 右侧：时间和更多选项 -->
    <div class="meta">
      <span class="time">{{ agent.lastChatTime }}</span>
      <n-dropdown trigger="click" :options="dropdownOptions" @select="handleSelect">
        <div class="flex h-full items-center justify-center">
          <n-button text style="font-size: 18px">
            <template #icon>
              <n-icon><DotsVertical /></n-icon>
            </template>
          </n-button>
        </div>
      </n-dropdown>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ai-agent-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.ai-agent-item.selected {
  background-color: #f0f8ff;
}

.avatar {
  width: 35px;
  height: 35px;
  margin-right: 16px;
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
  overflow: hidden;
}

.name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.description {
  font-size: 8px;
  color: #666;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  font-size: 12px;
  padding: 2px 8px;
  background-color: #f0f0f0;
  border-radius: 12px;
}

.meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 5px;
  height: 100%;
}

.time {
  font-size: 10px;
  color: #999;
}
</style>
